跨站腳本攻擊（Cross-Site Scripting, XSS）是前端/應用層常見的安全問題，攻擊者將惡意腳本注入到網站，當其他使用者瀏覽或互動時，腳本在受害者瀏覽器上執行，可能導致會話劫持、敏感資料竊取、惡意重導或在受信任環境下執行未授權行為。XSS 難以完全由網路層阻擋，必須在應用層正確設計與實作。

⸻

一、XSS 的三種主要類型（與影響）
1. Stored XSS（儲存型）
惡意內容被儲存在伺服器端（資料庫、留言板、使用者檔案等），當其他使用者載入帶有該內容的頁面時，惡意腳本會執行。
影響面廣、危害大，常見於留言、評論、用戶個人資料顯示等功能。
2. Reflected XSS（反射型）
惡意內容經由請求（如 URL 參數、表單）即時反射回頁面，通常借助社交工程誘導使用者點擊惡意連結。
雖然不會長期儲存，但可用於目標式攻擊（spear phishing）。
3. DOM-based XSS（DOM 型）
攻擊者的輸入只在瀏覽器端被 DOM 操作使用（例如 innerHTML、document.write、不安全的 location.hash 處理），伺服器端可能沒有任何輸入處理。
特殊且易被忽略，需要檢查前端程式碼的 DOM 操作與第三方函式庫用法。

⸻

二、典型攻擊後果
• 竊取 cookie（若無 HttpOnly）或 localStorage 中的敏感資料，進而進行會話劫持。
• 在使用者名義執行未授權操作（例如變更設定、發送訊息、下單）。
• 注入鍵盤記錄、畫面偽裝（UI redress）或下載惡意檔案。
• 作為橋接點執行惡意程式或進一步滲透內部系統。

⸻

三、防禦原則（優先次序）
1. 輸出編碼（Output Encoding） — 首要防線
• 在把任何不受信任的資料輸出到 HTML、HTML attribute、JavaScript、CSS、URL、或 XML 等上下文時，使用對應的編碼函式（HTML escape、JS escape、URL encode）。
• 範例：在 HTML 內容中顯示使用者輸入，應用 HTML escape（把 < > & " 等字元轉義）。
2. 內容過濾與白名單（Context-aware Sanitization）
• 若必須允許部分 HTML（如富文本），使用成熟的白名單型過濾器（例如 DOMPurify、Bleach 等），並限制允許的標籤與屬性。
• 避免黑名單策略（太容易被繞過）。
3. 避免危險 API（不要使用 innerHTML / document.write / eval）
• 優先使用安全的 DOM API（例如 textContent / innerText / createTextNode）而非 innerHTML。
• 非必要不要在前端拼接未經處理的 HTML 或執行字串作為程式碼。
4. HTTPOnly 與 Secure Cookie
• 把會話識別（session cookie）標記為 HttpOnly（前端 JS 無法存取）與 Secure（僅於 HTTPS 傳輸），降低 cookie 被竊取的風險。
5. Content Security Policy（CSP）— 減緩手段
• 設定 CSP（例如禁止 inline script、限制 script-src 來源）可以大幅降低 XSS 成功率與後續損害。
• 注意：CSP 不是替代輸出編碼的手段，而是多層防護的一部分。
6. 前端框架安全使用
• 現代框架（React、Angular、Vue）預設對輸出進行編碼，但開發者使用 dangerouslySetInnerHTML、v-html 或不安全的模板插值時要格外小心。
• 熟悉框架的安全建議與危險 API。
7. 輸入驗證作為輔助
• 輸入驗證（格式、長度、白名單）可以減少惡意輸入，但不應依賴僅靠輸入驗證來防 XSS（輸出編碼仍然必要）。

⸻

四、實務落地建議（開發與運營）
• 建立輸出編碼標準：在程式碼審查與安全準則內強制檢查輸出上下文是否被正確處理。
• 使用成熟庫：採用被審核的編碼與消毒庫，避免自製正則或濾掉字串的做法。
• 將安全測試納入 CI/CD：使用自動化掃描工具（SAST/DAST）檢測 XSS 類型的漏洞；在 QA 階段加入瀏覽器端的安全測試。
• 前端代碼審查：特別注意使用 innerHTML、eval、new Function()、location 操作與第三方 widget 的輸入處理。
• CSP 與報告機制（report-only）先行實驗：在部署嚴格 CSP 前，可先用 Content-Security-Policy-Report-Only 觀察影響，再逐步強化。
• 教育開發者：把 XSS 實作示例、常見陷阱與安全模式納入團隊 onboarding 與 code review checklist。

⸻

五、檢測要點（測試/攻擊面）
• 檢查所有顯示用戶輸入的頁面（搜尋結果、留言、個人資料、錯誤訊息、回傳參數）。
• 測試不同輸出上下文：HTML body、HTML attribute、JavaScript context、CSS context、URL context。
• 測試 DOM-based 路徑：搜尋前端程式碼中對 location, document, innerHTML 的使用。
• 使用自動化測試工具與手動探測結合，提高檢出率。

⸻

結語

XSS 看似簡單，但因為牽涉到「輸出到不同上下文」的細節，實作上容易出錯。防護的核心是：在所有輸出點採取 context-aware 的編碼或消毒，再配合 HttpOnly cookies、CSP 與開發流程中的自動化檢測，才能把風險降到可接受範圍